<template>
  <div>
    <div id="nav">
      <div class="sidebar-collapse navActive" role="navigation" >
        <ul class="nav" id="main-menu">
          <li class="mian-list first-li" @click="showZhifu" @selectstart.prevent="">
            <i class="iconfont icon-zhifu"></i>支付
            <transition name="slider">
              <ul class="sub-nav" v-show="is_zhifu" @click.stop="">
                <li class="mian-list">
                  <router-link to="/index/pay" tag="a">
                    订单信息
                  </router-link>
                </li>
                <li class="mian-list">
                  <router-link to="/index/payuser" tag="a">
                    商户信息
                  </router-link>
                </li>
                <li class="mian-list">
                  <router-link to="/index/paymer" tag="a">
                    渠道信息
                  </router-link>
                </li>
              </ul>
            </transition>
          </li>
          <li class="mian-list first-li" @click="showDaifu" @selectstart.prevent="">
            <i class="iconfont icon-daifu"></i>代付
            <transition name="slider">
              <ul class="sub-nav" v-show="is_daifu" @click.stop="">
                <li class="mian-list">
                  <router-link to="/index/payroll" tag="a">
                    订单信息
                  </router-link>
                </li>
                <li class="mian-list">
                  <router-link to="/index/payrolluser" tag="a">
                    商户信息
                  </router-link>
                </li>
                <li class="mian-list">
                  <router-link to="/index/payrollmer" tag="a">
                    渠道信息
                  </router-link>
                </li>
              </ul>
            </transition>
          </li>
        </ul>
      </div>
    </div>
    <div id="page-wrapper">
      <router-view></router-view>
    </div>

  </div>
</template>

<script>

  export default {
    name: "index",
    data(){
      return{
        is_zhifu: !this.$isDaifu,
        is_daifu: this.$isDaifu
      }
    },
    methods: {
      showZhifu () {
        this.is_zhifu = !this.is_zhifu;
        this.is_daifu = false;
      },
      showDaifu () {
        this.is_daifu = !this.is_daifu;
        this.is_zhifu = false;
      }
    }
  }
</script>

<style scoped>
  .sidebar-collapse {
    position: fixed;
    width:150px;
    height: 100%;
    z-index: 200;
    background: #081120!important;
    top: 0;
    left: 0;
  }
  #page-wrapper {
    position: relative;
    margin: 0 0 0 160px;
    top: 10px;
    box-shadow: 0 0 10px #e8e8e8;
    background: #e8e8e8;
    min-height: 750px;
  }
  .mian-list {
    width: 100%;
    line-height: 40px;
    text-align: center;
    color: #fff;
    cursor: pointer;
  }
  .mian-list a{
    text-decoration: none;
    font-size: 13px;
    color: #fff;
    display: block;
  }
  .mian-list a i{
    vertical-align: middle;
    margin-right: 5px;
  }
  .sidebar-collapse .nav > li a.active{
    background: #0c234d;
  }
  .sub-nav {
    overflow: hidden;
    background-color: #1c3861;
  }
  .first-li {
    text-align: left;
    background-color: #1bcbb6;
    box-sizing: border-box;
  }
  .first-li i {
    padding-left: 20px;
    margin-right: 10px;
  }
  .first-li {
    border-top: 1px solid #081120;
  }
  .mian-list:first-child {
    border-top: 1px solid #081120;
  }
  .mian-list + .mian-list {
    border-top: 1px solid #081120;
  }
  .slider-enter-active,
  .slider-leave-active {
    height: 123px;
    transition: all .5s;
  }
  .slider-enter,
  .slider-leave-to {
    height: 0;
  }
</style>
